daisyUI themes

How to use daisyUI themes?

daisyUI comes with a number of themes, which you can use with no extra effort. Each theme defines a set of colors which will be used on all daisyUI elements. To use a theme, add its name in tailwind.config.js and activate it by adding data-theme attribute to HTML tag: 
module.exports = {
  //...
  daisyui: {
    themes: ["light", "dark", "cupcake"],
  },
}
<html data-theme="cupcake"></html>
I suggest using theme-change, so you can switch themes and save selected theme in local storage.

List of themes

Try them:
light
A
A
A
A
dark
A
A
A
A
cupcake
A
A
A
A
bumblebee
A
A
A
A
emerald
A
A
A
A
corporate
A
A
A
A
synthwave
A
A
A
A
retro
A
A
A
A
cyberpunk
A
A
A
A
valentine
A
A
A
A
halloween
A
A
A
A
garden
A
A
A
A
forest
A
A
A
A
aqua
A
A
A
A
lofi
A
A
A
A
pastel
A
A
A
A
fantasy
A
A
A
A
wireframe
A
A
A
A
black
A
A
A
A
luxury
A
A
A
A
dracula
A
A
A
A
cmyk
A
A
A
A
autumn
A
A
A
A
business
A
A
A
A
acid
A
A
A
A
lemonade
A
A
A
A
night
A
A
A
A
coffee
A
A
A
A
winter
A
A
A
A
module.exports = {
  //...
  daisyui: {
    themes: [
      "light",
      "dark",
      "cupcake",
      "bumblebee",
      "emerald",
      "corporate",
      "synthwave",
      "retro",
      "cyberpunk",
      "valentine",
      "halloween",
      "garden",
      "forest",
      "aqua",
      "lofi",
      "pastel",
      "fantasy",
      "wireframe",
      "black",
      "luxury",
      "dracula",
      "cmyk",
      "autumn",
      "business",
      "acid",
      "lemonade",
      "night",
      "coffee",
      "winter",
    ],
  },
}
The default theme is light (or dark for dark mode) but you can change the default theme from tailwind.config.js

How to remove unused themes?

You can only include the themes you want in your project. This will reduce the size of your CSS file. In the below example
  • cupcake will be the default theme for light mode
  • dark will be the default theme for dark mode
  • cmyk can be applied on any HTML tag with data-theme='cmyk'
module.exports = {
  daisyui: {
    themes: ["cupcake", "dark", "cmyk"],
  },
}

How to disable all themes?

If you only want the default light and dark themes, set themes config to false. 
module.exports = {
  //...
  daisyui: {
    themes: false,
  },
}
If you don't want to include any themes and disable all colors, set themes config to an empty array. 
module.exports = {
  //...
  daisyui: {
    themes: [],
  },
}

How to use a theme only for a section of a page?

Add data-theme='THEME_NAME' to any element and everything inside will have your theme. You can nest themes and there is no limit! You can force a section of your HTML to only use a specific theme. 
<html data-theme="dark">
  <div data-theme="light">
    This div will always use light theme
    <span data-theme="retro">This span will always use retro theme!</span>
  </div>
</html>

How to add a new custom theme?

You can add a new theme from tailwind.config.js file. In the below example, I added a new theme called mytheme and I'm also including dark and cupcake themes.
  • The first theme (mytheme) will be the default theme.
  • dark theme will be the default theme for dark mode.
In the below example, I have the required colors. All other colors will be generated automatically (Like the color of button when you focus on it or the color of text on a primary button).

You can also add optional color names to have full control over all colors.

module.exports = {
  //...
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#a991f7",
          "secondary": "#f6d860",
          "accent": "#37cdbe",
          "neutral": "#3d4451",
          "base-100": "#ffffff",
        },
      },
      "dark",
      "cupcake",
    ],
  },
}

CSS variables in daisyUI themes

There are a few optional CSS variables that you can use in daisyUI themes to customize design decisions for each theme: 
module.exports = {
  //...
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#a991f7",
          "secondary": "#f6d860",
          "accent": "#37cdbe",
          "neutral": "#3d4451",
          "base-100": "#ffffff",

          "--rounded-box": "1rem", // border radius rounded-box utility class, used in card and other large boxes
          "--rounded-btn": "0.5rem", // border radius rounded-btn utility class, used in buttons and similar element
          "--rounded-badge": "1.9rem", // border radius rounded-badge utility class, used in badges and similar
          "--animation-btn": "0.25s", // duration of animation when you click on button
          "--animation-input": "0.2s", // duration of animation for inputs like checkbox, toggle, radio, etc
          "--btn-text-case": "uppercase", // set default text transform for buttons
          "--btn-focus-scale": "0.95", // scale transform of button when you focus on it
          "--border-btn": "1px", // border width of buttons
          "--tab-border": "1px", // border width of tabs
          "--tab-radius": "0.5rem", // border radius of tabs
        },
      },
    ],
  },
}

Custom CSS for a daisyUI theme

You can apply custom style to a daisyUI themes using CSS: 
[data-theme="mytheme"] .btn {
  border-width: 2px;
  border-color: black;
}

How to customize an existing theme?

In your tailwind.config.js, you can require an existing daisyUI theme and override some colors. In the below example, I require and spread light theme and change its primary and primary-focus colors: 
module.exports = {
  //...
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["[data-theme=light]"],
          "primary": "blue",
          "primary-focus": "mediumblue",
        },
      },
    ],
  },
}

How to add custom styles for a specific theme?

You can write custom style for your elements only for a specific theme. In this example, .btn-twitter class only will have this style on light theme. 
module.exports = {
  //...
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["[data-theme=light]"],
          ".btn-twitter": {
            "background-color": "#1EA1F1",
            "border-color": "#1EA1F1",
          },
          ".btn-twitter:hover": {
            "background-color": "#1C96E1",
            "border-color": "#1C96E1",
          },
        },
      },
    ],
  },
}
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective

Sponsors

Never google
a command again

Become a sponsor
daisyUI themes — Tailwind CSS Components